#control {
	margin: 0 auto;
	max-width: 700px;
	overflow: visible;
	position: relative;

	> .jog-panel {
		.box-sizing(border-box);
		margin: 0;
		padding: 0;

		&#x-y-panel {
			display: block;
			overflow: hidden;
			float: none;
			margin: 0 -20px;
			padding-top: 10px;

			.jog-panel {
				button {
					font-size: 36px;
					color: white;
					background: transparent;
					display: inline;
					padding: 0 !important;
					margin: 0;
					font-weight: normal;

					width: 16vw;
					height: 16vw;
					font-size: 11vw;

					@media (min-width: 700px) {
						font-size: 80px !important;
						width: 120px;
						height: 120px;
					}
				}

				&:nth-child(1) {
					margin: 0 0 0 -10px;

					h1:after {
						content: "+";
						padding-left: 15px;
						margin-right: -25px;
					}
				}
				&:nth-child(2) {
					h1:before {
						content: "+";
						padding-right: 15px;
						margin-left: -25px;
					}
				}
			}
		}

		&#e-panel {
			position: absolute;
			margin: 45px 0 0;
			width: 45%;
			right: 0;

			h1 {
				display: none;
			}
		}
		&:last-child {
			width: 45%;
			margin: 45px 0 0;

		}

		&#e-panel,
		&:last-child {
			.btn-group.control-box {
				height: auto;
				margin: 0 0 20px;

				button {
					margin: 0;
				}
			}
			.input-append.control-box {
				height: auto;
				margin: 0 38px 20px 0;

				.add-on {
					padding: 10px;
					z-index: 200;
				}
				input {
					margin: 0;
				}
			}
			button, input {
				padding: 10px 20px;
				margin: 0 0 20px;
				width: 100% !important;
				height: 40px;
				.box-sizing(border-box);
			}

			@media (max-width: 400px) {
				position: static;
				top: auto;
				right: auto;
				width: 100%;
			}
		}
		@media (max-width: 400px) {
			&:last-child {
				margin: 0 0 80px;
			}
		}

		&#extra-panel {
			position: absolute;
			top: 43px;
			right: -20px;

			h1 {
				display: none;
			}

			button {
				font-size: 36px;
				color: white;
				background: transparent;
				padding: 0 !important;
				margin: 0;
				font-weight: normal;
				overflow: hidden;

				width: 16vw;
				height: 16vw;
				font-size: 11vw;
				line-height: 200vw;

				@media (min-width: 700px) {
					font-size: 80px !important;
					width: 120px;
					height: 120px;
				}

				&:before,
				&:after {
					color: white;
					font-family: FontAwesome;
					.text-shadow(0 0 0 transparent);
					display: block;
					overflow: hidden;
					line-height: 17vw;

					@media (min-width: 700px) {
						line-height: 120px;
					}
				}
			}

			div {

				button {
					position: relative;

					&:before {
						content: "";

						background: url() center center no-repeat;
						background-size: 65% 65%;

						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
					}

					&.touch-focus {
						&:before {
							background: url() center center no-repeat;
							background-size: 65% 65%;
						}
					}

					&:first-child {
						&:before {
							background: transparent;
							content: "\f011";
						}
					}
					&:last-child {

						&:after {
							content: "\f057";
							color: red !important;
							font-size: 8vw;
							position: absolute;
							top: -2vw;
							right: 1vw;
							text-indent: 2000px;

							@media (min-width: 700px) {
								font-size: 58px;
								top: -16px;
								right: 13px;
							}
						}
					}
				}

			}
		}

		#jog_distance {
			position: absolute;
			top: -4px;
			overflow: hidden;
			left: 34%;
			width: 27%;
			max-width: 150px;
			height: 0;
			min-width: 80px;
			padding: 45px 0 0;

			@media (max-width: 430px) {
				left: 39%;

				button {
					font-size: 22px !important;
				}
			}

			&.open {
				height: auto;
				background-color: white;
				z-index: 1000;

				&:after {
					top: -5000px;
				}

				button {
					color: @dark-color;
				}
			}

			&:after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 2;
				height: 100%;
				cursor: pointer;
			}

			&:before {
				font-family: FontAwesome !important;
				content: "\f0d7";
				padding-left: 9px;
				font-size: 24px;
				display: inline-block;
				position: absolute;
				right: 10px;
				top: 13px;
				color: white;
			}

			button {
				width: 100%;
				display: block;
				background: transparent;
				color: white;
				margin: 0;
				border: 0 none !important;
				.box-shadow(none) !important;
				text-indent: -10px;

				&.active {
					top: 0px;
					position: absolute;
				}
			}
		}

		.jog-panel {
			float: right;
			margin: 0;
			margin-right: 23%;

			&:first-child {
				float: left;
				margin: 0;

				h1 {
					@media (max-width: 430px) {
						width: 40vw;
					}
				}
			}
			&:nth-child(2) {
				h1 {
					@media (max-width: 430px) {
						position: relative;
						left: 20vw;
					}
				}
			}

			h1 {
				color: @light-darker-dark-color;
				margin: -10px 0 5px;
				font-size: 27px;
				text-align: center;
			}
		}

		.distance {
			float: none;
			clear: both;
			margin: 40px 0 0;

			.btn-group {
				width: 50%;
				display: block;

				button {
					width: 25%;
					padding: 13px;
					border: 1px solid !important;
					font-size: 27px !important;
				}
			}

		}

		.slider {
			.slider-track,
			button {
				display: none;
			}

			input {
				display: block !important;
			}
		}

	}

}
